<template>
	<view class="detailsPage">

		<uv-sticky bgColor="#f5f5f5">
			<uv-tabs :list="list" :current="currentTabIndex" lineColor="#daa03d" :activeStyle="{ color: '#daa03d'}"
				@change="handleTabChange"></uv-tabs>
		</uv-sticky>

		<view class="Product-page">
			<view class="Product-List" v-for="item in 5">
				<view class="Product-item" >
					<view class="Product-box">
						<view class="Product-left">
							<view class="Product-img  ">
								<image src="https://crazy3.top/images/avatar/狂三.png" mode="widthFix" class="border-10">
								</image>
							</view>
							<view class="left-item">
								<view class="size-16 size-bold color-333 noWrap">珠宝黄金玉珠宝黄金玉珠宝黄金玉珠宝黄金玉</view>
								<view class="size-14 color-666 zi-hide-2">珠宝黄介绍珠宝</view>
								<view class="size-bold color-e9 size-14 ">￥5000</view>
							</view>
						</view>
						<view class="Product-right size-14 color-666">
							x10
						</view>
					</view>
					<view class="Operate-btn">
						<view class="size-14  color-333 ">需付款：<span class="size-16 size-bold color-333">￥5000</span></view>
						<view class="btn-box">
							<view class="btn-delete size-14 color-666">取消订单</view>
							<view class="btn-submit">继续付款</view>
						</view>


					</view>
				</view>

			</view>
			<view class="">
				<not-have :mode="'order'"></not-have>
			</view>
		</view>


	</view>
</template>

<script>
	import notHave from '@/components/notHave/notHave.vue';

	export default {
		components: {
			notHave
		},

		data() {
			return {
				currentTabIndex: 3,
				list: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '售后'
					},
					{
						name: '已完成'
					},
					
				]
			};
		},
		onLoad(option) {
			const tabIndex = parseInt(option.index, 10);
			if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < this.list.length) {
				this.currentTabIndex = tabIndex + 1;
			} else {
				this.currentTabIndex = 0; // 默认第一个
			}
		},
		methods:{
			handleTabChange(){
				
			}
		}
	}
</script>

<style lang="less">
	.detailsPage {
		// padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.Product-page {
		padding: 30rpx;
		background-color: #f5f5f5;
	}

	.Product-List {
		width: 100%;
		margin-top: 30rpx;
		// margin-bottom: calc(40px + env(safe-area-inset-bottom));
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.Product-item {
			width: 100%;
			padding: 20rpx 0rpx;

			.Product-box {
				display: flex;

				.Product-left {
					width: 80%;
					display: flex;
					align-items: center;
					gap: 20rpx;

					.Product-img {
						width: 140rpx;
						height: 140rpx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.left-item {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						gap: 10rpx;
						min-width: 0;
					}
				}

				.Product-right {
					flex: 1;
					display: flex;
					justify-content: flex-end;




				}
			}

			.Operate-btn {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				gap: 30rpx;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;

				.btn-box {
					
					display: flex;
					align-items: center;
					gap: 8rpx;

					.btn-delete,
					.btn-modify,
					.btn-submit {
						padding: 10rpx 20rpx;
					}
					.btn-submit{
						background-color: #32B9B3;
						font-size: 14px;
						color: white;
						border-radius: 50px;
					}



				}
			}

		}
	}
</style>